<template>
    <div class="buy-container">
        <div class="buy" v-for="item in data" :key="item.id" @click="go(item.id)">
            <img :src="item.img_url" alt="">
            <div class="info">
                <h6>{{item.title}}</h6>
                <div class="price">
                    <span class="newPrice">
                        ￥{{item.sell_price}}
                    </span>
                    <span class="oldPrice">
                        ￥{{item.market_price}}
                    </span>
                </div>
                <p>
                    <span>热卖中</span>
                    <span>剩余{{item.stock_quantity}}件</span>
                </p>
            </div>
        </div>
        <mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
    import {
        toast
    } from 'mint-ui';
    export default {
        data() {
            return {
                pageindex: 1,
                data: []
            }
        },
        methods: {
            getData() {
                this.$http.get(`api/getgoods?pageindex=${this.pageindex}`).then(res => {
                    if (res.body.status == 0) {
                        this.data = this.data.concat(res.body.message);
                    } else {
                        toast('获取数据失败');
                    }
                });
            },
            getMore() {
                this.pageindex++;
                this.getData();
            },
            go(id) {
                this.$router.push(`/index/buy/buyInfo/${id}`);
            }
        },
        created() {
            this.getData();
        },
    }
</script>

<style lang="less" slot-scope>
    .buy-container {
        padding: 0 4px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .buy {
            width: 49%;
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 0 6px #ccc;
            font-size: 14px;
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            h6 {
                font-weight: 600;
                color: #333;
                padding: 0;
                margin: 5px 0;
            }

            img {
                width: 100%;
                display: block;
            }

            p {
                margin: 0;
                font-size: 12px;
                display: flex;
                justify-content: space-between;
                background-color: #ccc;
            }

            .price {
                padding: 5px 0;
                background-color: #ccc;

                .newPrice {
                    font-size: 16px;
                    color: red;
                }

                .oldPrice {
                    font-size: 12px;
                    color: #999;
                    text-decoration: line-through;
                }
            }
        }

        button {
            margin: 5px 0;
        }
    }
</style>